<template>
  <div class="recommend">
    <div class="top">
      <div class="sub-title">
        为你推荐
      </div>
      <div
        class="show-hide"
        v-show="!isShowMore"
        @click="isShowMore = !isShowMore"
      >
        <span class="show-hide__inner-text">
          展开
        </span>
        <img
          src="../../assets/images/icons/icon_arrow_down_grey.png"
          class="show-hide__img"
          alt=""
        />
      </div>
      <div
        class="show-hide"
        v-show="isShowMore"
        @click="isShowMore = !isShowMore"
      >
        <span class="show-hide__inner-text"> 收起 </span>
        <img
          src="../../assets/images/icons/icon_arrow_up_grey.png"
          alt="收起"
          class="show-hide__img"
        />
      </div>
    </div>
    <ul class="content recomend-list ">
      <li
        v-for="recommend in showRecommendList"
        :key="recommend.id"
        class="recommend-node"
      >
        <img :src="recommend.imgUrl" alt="" class="recommend-node__img" />
        <div class="recommend-node__info">
          <div class="recommend-node__info-top">
            {{ recommend.name }}
          </div>
          <div class="recommend-node__info-bottom">
            {{ recommend.commentNum + '人正在讨论' }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// 推荐的圈子
export default {
  components: {},
  props: {
    // 最少推荐

    minNum: { type: Number, default: 3 },
    // 最多推荐
    maxNum: { type: Number, default: 8 },
  },
  name: 'Recommend',
  data() {
    return {
      isShowMore: 'false',
      recomendList: [],
    }
  },
  watch: {},
  computed: {
    showRecommendList() {
      return this.isShowMore
        ? this.recomendList.slice(0, this.maxNum)
        : this.recomendList.slice(0, this.minNum)
    },
  },
  methods: {},
  created() {
    this.recomendList = [
      {
        id: '11',
        commentNum: '500',
        name: '酷玩穿戴',
        imgUrl: 'https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF',
      },
      {
        id: '12',
        commentNum: '500',
        name: '硬件圈子',
        imgUrl: 'https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF',
      },
      {
        id: '13',
        commentNum: '500',
        name: '游戏圈子',
        imgUrl: 'https://t7.baidu.com/it/u=2196286164,316669081&fm=193&f=GIF',
      },
      {
        id: '14',
        commentNum: '500',
        name: '酷玩穿戴',
        imgUrl: 'https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF',
      },
      {
        id: '15',
        commentNum: '500',
        name: '硬件圈子',
        imgUrl: 'https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF',
      },
      {
        id: '16',
        commentNum: '500',
        name: '游戏圈子',
        imgUrl: 'https://t7.baidu.com/it/u=2196286164,316669081&fm=193&f=GIF',
      },
    ]
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.recommend {
  padding: 24px 16px;
  background: $color-background;
}
.top {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.sub-title {
  font-weight: 500;
  font-size: 16px;
}
.show-hide {
  padding-bottom: 8px;
}
.show-hide__inner-text {
  color: rgba($color: #000000, $alpha: 0.6);
  font-weight: 400;
  padding-left: 5px;
  vertical-align: super;
}
.show-hide__img {
  width: 20px;
}
.recommend-node {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
}
.recommend-node__img {
  margin-right: 16px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.recommend-node__info-top {
  font-size: 16px;
  line-height: 24px;
}
.recommend-node__info-bottom {
  color: rgba($color: #000000, $alpha: 0.6);
  line-height: 20px;
}
</style>
